<template>
  <div class="treatments-container">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <span>治疗记录管理</span>
          <el-button type="primary" @click="showAddTreatmentDialog">添加治疗记录</el-button>
        </div>
      </template>
      
      <!-- 搜索和筛选 -->
      <div class="search-filter-section">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="患者姓名">
            <el-input 
              v-model="searchForm.patient_name" 
              placeholder="请输入患者姓名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="治疗方案">
            <el-select 
              v-model="searchForm.treatment_plan" 
              placeholder="请选择治疗方案"
              clearable
            >
              <el-option label="静脉溶栓" value="静脉溶栓"></el-option>
              <el-option label="动脉溶栓" value="动脉溶栓"></el-option>
              <el-option label="桥接治疗" value="桥接治疗"></el-option>
              <el-option label="保守治疗" value="保守治疗"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="治疗时间范围">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 数据表格 -->
      <el-table 
        v-loading="loading" 
        :data="paginatedTreatments" 
        style="width: 100%"
        border
      >
        <el-table-column prop="treatment_id" label="治疗ID" width="100" />
        <el-table-column 
          label="患者信息" 
          width="200"
          :formatter="formatPatientInfo"
        />
        <el-table-column prop="treatment_time" label="治疗时间" width="180" />
        <el-table-column prop="treatment_plan" label="治疗方案" width="120" />
        <el-table-column prop="thrombolytic_drug" label="溶栓药物" width="120" />
        <el-table-column prop="drug_dosage" label="药物剂量" width="100" />
        <el-table-column prop="treatment_effect" label="治疗效果" width="100" />
        <el-table-column 
          prop="nihss_score_change" 
          label="NIHSS变化" 
          width="120"
        >
          <template #default="{ row }">
            <el-tag :type="row.nihss_score_change > 0 ? 'success' : row.nihss_score_change < 0 ? 'danger' : ''">
              {{ row.nihss_score_change }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="creation_time" label="创建时间" width="180" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="viewTreatmentDetail(row.treatment_id)">详情</el-button>
            <el-button type="warning" size="small" @click="editTreatment(row)">编辑</el-button>
            <el-button type="danger" size="small" @click="deleteTreatment(row.treatment_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredTreatments.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 添加/编辑治疗记录对话框 -->
    <el-dialog
      v-model="treatmentDialogVisible"
      :title="dialogType === 'add' ? '添加治疗记录' : '编辑治疗记录'"
      width="800px"
    >
      <el-form 
        :model="treatmentForm" 
        ref="treatmentFormRef" 
        label-width="120px"
        :rules="formRules"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="选择卒中事件" prop="event_id" v-if="dialogType === 'add'">
              <el-select v-model="treatmentForm.event_id" placeholder="请选择卒中事件" filterable>
                <el-option 
                  v-for="event in strokeEvents" 
                  :key="event.event_id" 
                  :label="`事件ID:${event.event_id} - ${formatEventLabel(event)}`" 
                  :value="event.event_id"
                >
                  <!-- 卒中事件选择器选项 -->
                  <template #default="{ option }">
                    <div>
                      <div>{{ option.label }}</div>
                      <div class="text-xs text-gray-500">患者: {{ getPatientName(option.value) }}</div>
                    </div>
                  </template>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="患者信息" v-else-if="dialogType === 'edit' && currentPatient">
              <div class="patient-info-display">
                <p>姓名: {{ currentPatient.patient_name }}</p>
                <p>事件ID: {{ treatmentForm.event_id }}</p>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="治疗时间" prop="treatment_time">
              <el-date-picker
                v-model="treatmentForm.treatment_time"
                type="datetime"
                placeholder="选择治疗时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="治疗方案" prop="treatment_plan">
              <el-select v-model="treatmentForm.treatment_plan" placeholder="请选择治疗方案">
                <el-option label="静脉溶栓" value="静脉溶栓"></el-option>
                <el-option label="动脉溶栓" value="动脉溶栓"></el-option>
                <el-option label="桥接治疗" value="桥接治疗"></el-option>
                <el-option label="保守治疗" value="保守治疗"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="溶栓药物" prop="thrombolytic_drug">
              <el-select v-model="treatmentForm.thrombolytic_drug" placeholder="请选择溶栓药物" allow-create filterable>
                <el-option label="阿替普酶" value="阿替普酶"></el-option>
                <el-option label="尿激酶" value="尿激酶"></el-option>
                <el-option label="瑞替普酶" value="瑞替普酶"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="药物剂量" prop="drug_dosage">
              <el-input v-model="treatmentForm.drug_dosage" placeholder="请输入药物剂量（mg）" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="治疗效果" prop="treatment_effect">
              <el-select v-model="treatmentForm.treatment_effect" placeholder="请选择治疗效果">
                <el-option label="显著改善" value="显著改善"></el-option>
                <el-option label="部分改善" value="部分改善"></el-option>
                <el-option label="无变化" value="无变化"></el-option>
                <el-option label="恶化" value="恶化"></el-option>
                <el-option label="死亡" value="死亡"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="治疗前NIHSS评分" prop="pre_treatment_nihss">
              <el-input v-model.number="treatmentForm.pre_treatment_nihss" placeholder="请输入NIHSS评分" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="治疗后NIHSS评分" prop="post_treatment_nihss">
              <el-input v-model.number="treatmentForm.post_treatment_nihss" placeholder="请输入NIHSS评分" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="治疗记录" prop="treatment_records">
              <el-input 
                v-model="treatmentForm.treatment_records" 
                placeholder="请输入详细治疗记录"
                type="textarea"
                rows="3"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="并发症" prop="complications">
              <el-input 
                v-model="treatmentForm.complications" 
                placeholder="请输入并发症情况，如无请填写'无'"
                type="textarea"
                rows="2"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="notes">
              <el-input 
                v-model="treatmentForm.notes" 
                placeholder="请输入备注信息"
                type="textarea"
                rows="2"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="treatmentDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitTreatmentForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { treatmentAPI, patientAPI, strokeEventAPI } from '../api'

// 状态数据
const loading = ref(false)
const treatments = ref([])
const patients = ref([])
const strokeEvents = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const searchForm = ref({
  patient_name: '',
  treatment_plan: ''
})
const dateRange = ref([])

// 对话框相关
const treatmentDialogVisible = ref(false)
const dialogType = ref('add')
const treatmentFormRef = ref()
const currentPatient = ref(null)
const treatmentForm = ref({
  treatment_id: '',
  event_id: '',
  treatment_time: '',
  treatment_plan: '',
  thrombolytic_drug: '',
  drug_dosage: '',
  treatment_effect: '',
  pre_treatment_nihss: '',
  post_treatment_nihss: '',
  treatment_records: '',
  complications: '',
  notes: ''
})

// 表单验证规则
const formRules = {
  event_id: [
    { required: true, message: '请选择卒中事件', trigger: 'change' }
  ],
  treatment_time: [
    { required: true, message: '请选择治疗时间', trigger: 'change' }
  ],
  treatment_plan: [
    { required: true, message: '请选择治疗方案', trigger: 'change' }
  ],
  treatment_effect: [
    { required: true, message: '请选择治疗效果', trigger: 'change' }
  ],
  treatment_records: [
    { required: true, message: '请输入治疗记录', trigger: 'blur' }
  ]
}

// 监听事件ID变化，获取患者信息
watch(() => treatmentForm.value.event_id, async (newEventId) => {
  if (newEventId && dialogType.value === 'edit') {
    const event = strokeEvents.value.find(e => e.event_id === newEventId)
    if (event) {
      // 确保使用正确的字段名进行查找
      currentPatient.value = patients.value.find(p => p.patient_id === event.patient_id)
    }
  }
})

// 根据搜索条件过滤治疗记录
const filteredTreatments = computed(() => {
  let result = treatments.value
  
  // 根据患者姓名过滤
  if (searchForm.value.patient_name) {
    const name = searchForm.value.patient_name
    result = result.filter(treatment => {
      const event = strokeEvents.value.find(e => e.event_id === treatment.event_id)
      if (!event) return false
      // 确保使用正确的字段名进行查找
      const patient = patients.value.find(p => p.patient_id === event.patient_id)
      return patient && patient.patient_name.includes(name)
    })
  }
  
  // 根据治疗方案过滤
  if (searchForm.value.treatment_plan) {
    result = result.filter(treatment => treatment.treatment_plan === searchForm.value.treatment_plan)
  }
  
  // 根据日期范围过滤
  if (dateRange.value && dateRange.value.length === 2) {
    const startDate = new Date(dateRange.value[0])
    const endDate = new Date(dateRange.value[1])
    endDate.setHours(23, 59, 59, 999)
    
    result = result.filter(treatment => {
      const treatmentDate = new Date(treatment.treatment_time)
      return treatmentDate >= startDate && treatmentDate <= endDate
    })
  }
  
  // 计算NIHSS评分变化
  result.forEach(treatment => {
    if (treatment.pre_treatment_nihss !== undefined && treatment.post_treatment_nihss !== undefined) {
      treatment['nihss_score_change'] = treatment.pre_treatment_nihss - treatment.post_treatment_nihss
    } else {
      treatment['nihss_score_change'] = '-'  
    }
  })
  
  return result
})

// 分页治疗记录
const paginatedTreatments = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredTreatments.value.slice(start, end)
})

// 获取数据
const getData = async () => {
  loading.value = true
  try {
    // 获取治疗记录列表
    const treatmentsData = await treatmentAPI.getRecords()
    // 转换治疗记录字段名
    treatments.value = treatmentsData.map(item => {
      // 改进用药记录解析逻辑
      let thrombolytic_drug = '';
      let drug_dosage = '';
      
      if (item.用药记录) {
        // 检查是否包含空格（表示有剂量信息）
        if (item.用药记录.includes(' ') && !item.用药记录.includes('、')) {
          // 格式: "药物名 剂量" (如 "rt-PA 0.9mg/kg")
          const parts = item.用药记录.split(' ');
          thrombolytic_drug = parts[0];
          drug_dosage = parts.slice(1).join(' '); // 剂量可能包含空格
        } else if (item.用药记录.includes('、')) {
          // 格式: "药物1、药物2" (如 "甘露醇、止血药")
          thrombolytic_drug = item.用药记录; // 显示所有药物
          drug_dosage = ''; // 没有明确剂量
        } else {
          // 单一药物名
          thrombolytic_drug = item.用药记录;
          drug_dosage = '';
        }
      }
      
      // 规范化治疗方案显示
      let treatment_plan = item.治疗方式;
      // 从治疗方式中提取主要治疗类型
      if (treatment_plan.includes('溶栓')) {
        treatment_plan = '静脉溶栓';
      } else if (treatment_plan.includes('手术')) {
        treatment_plan = '手术治疗';
      } else if (treatment_plan.includes('抗血小板')) {
        treatment_plan = '抗血小板治疗';
      } else if (treatment_plan.includes('取栓')) {
        treatment_plan = '血管内取栓术';
      }
      
      return {
        treatment_id: item.记录ID,
        event_id: item.卒中事件ID,
        treatment_time: item.治疗时间,
        treatment_plan: treatment_plan,
        thrombolytic_drug: thrombolytic_drug,
        drug_dosage: drug_dosage,
        treatment_effect: '',
        pre_treatment_nihss: '',
        post_treatment_nihss: '',
        treatment_records: item.用药记录 || '',
        complications: '',
        notes: '',
        主治医生: item.主治医生,
        creation_time: item.created_at
      };
    })
    
    // 获取患者列表（API已经做了标准化处理，无需再转换）
  const patientsData = await patientAPI.getPatients()
  patients.value = patientsData
  
  // 获取卒中事件列表（API已经做了标准化处理，无需再转换）
  const eventsData = await strokeEventAPI.getEvents()
  strokeEvents.value = eventsData
  } catch (error) {
    ElMessage.error('获取数据失败')
    console.error('获取数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  // 重置为第一页以显示搜索结果
  currentPage.value = 1
  // 搜索逻辑已在filteredTreatments计算属性中实现
}

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    patient_name: '',
    treatment_plan: ''
  }
  dateRange.value = []
  currentPage.value = 1
}

// 分页处理
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (current) => {
  currentPage.value = current
}

// 显示添加治疗记录对话框
const showAddTreatmentDialog = () => {
  dialogType.value = 'add'
  currentPatient.value = null
  treatmentForm.value = {
    treatment_id: '',
    event_id: '',
    treatment_time: '',
    treatment_plan: '',
    thrombolytic_drug: '',
    drug_dosage: '',
    treatment_effect: '',
    pre_treatment_nihss: '',
    post_treatment_nihss: '',
    treatment_records: '',
    complications: '',
    notes: ''
  }
  treatmentDialogVisible.value = true
}

// 编辑治疗记录
const editTreatment = async (row) => {
  dialogType.value = 'edit'
  
  // 填充表单数据，确保字段名一致性
  treatmentForm.value = {
    treatment_id: row.treatment_id,
    event_id: row.event_id,
    treatment_time: row.treatment_time,
    treatment_plan: row.treatment_plan,
    thrombolytic_drug: row.thrombolytic_drug,
    drug_dosage: row.drug_dosage,
    treatment_effect: row.treatment_effect,
    pre_treatment_nihss: row.pre_treatment_nihss,
    post_treatment_nihss: row.post_treatment_nihss,
    treatment_records: row.treatment_records,
    complications: row.complications,
    notes: row.notes,
    主治医生: row.主治医生
  }
  
  // 获取对应的事件和患者信息
  const event = strokeEvents.value.find(e => e.event_id === row.event_id)
  if (event) {
    // 确保使用正确的字段名进行查找
    currentPatient.value = patients.value.find(p => p.patient_id === event.patient_id)
  }
  
  treatmentDialogVisible.value = true
}

// 提交表单
const submitTreatmentForm = async () => {
  try {
    await treatmentFormRef.value.validate()
    
    // 构建提交数据，使用后端期望的字段名
    const submitData = {
      卒中事件ID: treatmentForm.value.event_id,
      治疗时间: treatmentForm.value.treatment_time,
      治疗方式: treatmentForm.value.treatment_plan,
      用药记录: `${treatmentForm.value.thrombolytic_drug || ''} ${treatmentForm.value.drug_dosage || ''}`.trim(),
      主治医生: treatmentForm.value.主治医生,
      created_at: new Date().toISOString()
    }
    
    if (dialogType.value === 'add') {
      await treatmentAPI.addRecord(submitData)
      ElMessage.success('治疗记录添加成功')
    } else {
      // 更新治疗记录
      submitData.记录ID = treatmentForm.value.treatment_id
      await treatmentAPI.updateRecord(submitData)
      ElMessage.success('治疗记录更新成功')
    }
    
    treatmentDialogVisible.value = false
    getData() // 重新获取数据
  } catch (error) {
    if (error !== false) { // 非表单验证错误
      ElMessage.error('操作失败，请重试')
      console.error('操作失败:', error)
    }
  }
}

// 删除治疗记录
const deleteTreatment = async (treatmentId) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除该治疗记录吗？此操作不可撤销！',
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 确保使用正确的参数结构调用API
    await treatmentAPI.deleteRecord(treatmentId)
    ElMessage.success('治疗记录已删除')
    getData() // 重新获取数据
  } catch (error) {
    if (error !== 'cancel' && error !== 'close') {
      ElMessage.error('删除失败')
      console.error('删除失败:', error)
    }
  }
}

// 查看治疗记录详情
const viewTreatmentDetail = (treatmentId) => {
  const treatment = treatments.value.find(t => t.treatment_id === treatmentId)
  if (!treatment) return
  
  dialogType.value = 'view'
  // 确保表单数据使用正确的字段名
  treatmentForm.value = {
    treatment_id: treatment.treatment_id,
    event_id: treatment.event_id,
    treatment_time: treatment.treatment_time,
    treatment_plan: treatment.treatment_plan,
    thrombolytic_drug: treatment.thrombolytic_drug,
    drug_dosage: treatment.drug_dosage,
    treatment_effect: treatment.treatment_effect,
    pre_treatment_nihss: treatment.pre_treatment_nihss,
    post_treatment_nihss: treatment.post_treatment_nihss,
    treatment_records: treatment.treatment_records,
    complications: treatment.complications,
    notes: treatment.notes,
    主治医生: treatment.主治医生
  }
  
  // 获取对应的卒中事件和患者信息
  const event = strokeEvents.value.find(e => e.event_id === treatment.event_id)
  if (event) {
    // 确保使用正确的字段名进行查找
    currentPatient.value = patients.value.find(p => p.patient_id === event.patient_id)
  }
  
  treatmentDialogVisible.value = true
}

// 格式化患者信息
const formatPatientInfo = (row) => {
  const event = strokeEvents.value.find(e => e.event_id === row.event_id)
  if (!event) return '未知患者'
  
  // 确保使用正确的字段名进行查找
  const patient = patients.value.find(p => p.patient_id === event.patient_id)
  return patient ? `${patient.patient_name} (ID: ${patient.patient_id})` : '未知患者'
}

// 格式化事件标签
const formatEventLabel = (event) => {
  // 确保使用正确的字段名进行查找
  const patient = patients.value.find(p => p.patient_id === event.patient_id)
  const patientName = patient ? patient.patient_name : '未知患者'
  return `${patientName} - ${event.event_type || '未知类型'} - ${new Date(event.onset_time || Date.now()).toLocaleDateString()}`
}

// 获取患者姓名
const getPatientName = (patientId) => {
  // 确保使用正确的字段名进行查找
  const patient = patients.value.find(p => p.patient_id === patientId)
  return patient ? patient.patient_name : '未知患者'
}

// 组件挂载时获取数据
onMounted(() => {
  getData()
})
</script>

<style scoped>
.treatments-container {
  padding: 20px;
  background-color: #FFFFFF;
  min-height: 100vh;
  border: 1px solid #e0e0e0;
}

.page-card {
  margin-bottom: 20px;
  background-color: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  box-shadow: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000000;
}

/* 确保标题文字为黑色 */
.card-header span {
  color: #000000 !important;
}

.search-filter-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  box-shadow: none;
}

.search-form {
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.patient-info-display {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.patient-info-display p {
  margin: 5px 0;
  color: #000000;
}

/* 适配Element Plus深色主题下的组件 */
:deep(.el-input__wrapper),
:deep(.el-select__wrapper),
:deep(.el-date-editor .el-input__wrapper) {
  background-color: #FFFFFF !important;
  border-color: #dcdfe6 !important;
  color: #000000;
}

:deep(.el-input__placeholder),
:deep(.el-select__placeholder) {
  color: #c0c4cc !important;
}

:deep(.el-input__inner),
:deep(.el-select__input) {
  color: #000000 !important;
}

:deep(.el-input__wrapper:hover),
:deep(.el-select__wrapper:hover),
:deep(.el-date-editor .el-input__wrapper:hover) {
  border-color: #666 !important;
}

:deep(.el-input__wrapper.is-focus),
:deep(.el-select__wrapper.is-focus),
:deep(.el-date-editor .el-input__wrapper.is-focus) {
  border-color: #409eff !important;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
}

/* 表格样式 */
:deep(.el-table) {
  background-color: #FFFFFF;
  color: #000000;
}

:deep(.el-table__header-wrapper th) {
  background-color: #f5f7fa;
  color: #000000;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-table__row) {
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

/* 按钮样式 */
:deep(.el-button--primary) {
  background-color: #409eff;
  border-color: #409eff;
}

:deep(.el-button--primary:hover) {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

:deep(.el-button--default) {
  background-color: #ffffff;
  border-color: #dcdfe6;
  color: #606266;
}

:deep(.el-button--default:hover) {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
  color: #409eff;
}

/* 对话框样式 */
:deep(.el-dialog__wrapper .el-dialog) {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
}

:deep(.el-dialog__wrapper .el-dialog__header) {
  border-bottom: 1px solid #ebeef5;
  background-color: #ffffff;
}

:deep(.el-dialog__wrapper .el-dialog__title) {
  color: #000000;
}

:deep(.el-dialog__wrapper .el-form-item__label) {
  color: #000000;
}

:deep(.el-dialog__body) {
  background-color: #ffffff;
}

:deep(.el-dialog__footer) {
  background-color: #ffffff;
  border-top: 1px solid #ebeef5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-form .el-form-item {
    margin-bottom: 15px;
  }
}
</style>